<template>
	<div class="process hidden-sm-and-down">
		<el-steps direction="vertical" :active="1">
		<el-step title="Read the Agreement" />
		<el-step title="Filling the form" />
		<el-step title="Finish!" />
		</el-steps>
  	</div> 
	<div class="container">
		<h1>Hello Employer!</h1>
		<div class="content">
			<el-icon size="40px" class="icon"><Document /></el-icon>
			<h2 class="mb-4">Before start</h2>
		</div>
		<div class="colContent">
			<p class="text">
                <h4>The MIT License (MIT) Copyright © 2023</h4>
				<br />&ensp;&ensp;&ensp;&ensp;Permission is hereby granted, free of
				charge, to any person obtaining a copy of this software and associated
				documentation files (the “Software”), to deal in the Software without
				restriction, including without limitation the rights to use, copy,
				modify, merge, publish, distribute, sublicense, and/or sell copies of
				the Software, and to permit persons to whom the Software is furnished to
				do so, subject to the following conditions:<br />
				&ensp;&ensp;&ensp;&ensp;The above copyright notice and this permission notice shall be included
				in all copies or substantial portions of the Software.<br />
				&ensp;&ensp;&ensp;&ensp;THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT
				WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
				THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
				NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
				LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
				OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
				WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\
                <div class="content" style="justify-content: center;"> 
                    <el-button type="primary" style="margin: 20px;">Accept</el-button>
                    <el-button>Deny</el-button>
                </div>
			</p>
		</div>
		<div class="content">
			<el-icon size="40px" class="icon"><FolderChecked /></el-icon>
			<h2 class="mb-4">
				Filling the form to start your first bike-sharing shop!
			</h2>
		</div>
		<div class="content">
			<el-form
				ref="ruleFormRef"
				:model="ruleForm"
				:rules="rules"
				label-width="120px"
				class="demo-ruleForm"
				:size="formSize"
				status-icon
			>
				<el-form-item label="Shop name" prop="name">
					<el-input v-model="ruleForm.name" />
				</el-form-item>
				<el-form-item label="Shop zone" prop="region">
					<el-select v-model="ruleForm.region" placeholder="Shop zone">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</el-form-item>
				<el-form-item label="Shop count" prop="count">
					<el-select-v2
						v-model="ruleForm.count"
						placeholder="Shop count"
						:options="options"
					/>
				</el-form-item>
				<el-form-item label="Shop time" required>
					<el-col :span="11">
						<el-form-item prop="date1">
							<el-date-picker
								v-model="ruleForm.date1"
								type="date"
								label="Pick a date"
								placeholder="Pick a date"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
					<el-col class="text-center" :span="2">
						<span class="text-gray-500">-</span>
					</el-col>
					<el-col :span="11">
						<el-form-item prop="date2">
							<el-time-picker
								v-model="ruleForm.date2"
								label="Pick a time"
								placeholder="Pick a time"
								style="width: 100%"
							/>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item label="Instant delivery" prop="delivery">
					<el-switch v-model="ruleForm.delivery" />
				</el-form-item>
				<el-form-item label="Shop type" prop="type">
					<el-checkbox-group v-model="ruleForm.type">
						<el-checkbox label="Online activities" name="type" />
						<el-checkbox label="Promotion activities" name="type" />
						<el-checkbox label="Offline activities" name="type" />
						<el-checkbox label="Simple brand exposure" name="type" />
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="Resources" prop="resource">
					<el-radio-group v-model="ruleForm.resource">
						<el-radio label="Sponsorship" />
						<el-radio label="Venue" />
					</el-radio-group>
				</el-form-item>
				<el-form-item label="Shop form" prop="desc">
					<el-input v-model="ruleForm.desc" type="textarea" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)">
						Create
					</el-button>
					<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<style scoped>
.process{
	height: 300px;
	position:fixed;
	left:50px;
	top:30%;
	background-color: white;
	border-radius: 5px;
	padding:10px;
}

.mapContainer {
	width: 90%;
	height: 500px;
	margin-left: 40px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.mapContainer:hover {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
}

.container {
	width: 100%;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}

.content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.colContent {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.mb-4 {
	margin-left: 20px;
	justify-content: center;
	align-items: center;
}

.m-2 {
	margin-left: 20px;
}

.icon {
	margin-left: 15px;
}

.mapLink {
	color: blue;
	cursor: pointer;
}

/* 鼠标悬停阴影效果 */
.option {
	width: 46%;
	background-color: white;
	margin: 20px;
	padding: 10px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.option:hover {
	-webkit-transform: scale(1.02);
	transform: scale(1.02);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
}

.listContent {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}

div {
	border-radius: 5px;
}

/* 响应式布局，换行展示 */
@media screen and (min-width: 0px) and (max-width: 900px) {
	.option {
		width: 90%;
		background-color: white;
		margin: 20px;
		padding: 10px;
		cursor: pointer;
	}

	.text {
		width: 90%;

	}
}

@media screen and (min-width: 900px) and (max-width: 2000px) {

	.text {
		width: 40%;

	}
}

.demo-progress .el-progress--line {
	margin-bottom: 15px;
	width: 350px;
	margin-left: 20px;
}

.demo-ruleForm {
	background-color: white;
	padding: 10px;
	border-radius: 5px;
	margin: 40px;
	margin-top: 10px;
}

.text {
	background-color: white;
	padding: 10px;
	border-radius: 5px;
	font-size: large;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	name: "Hello",
	region: "",
	count: "",
	date1: "",
	date2: "",
	delivery: false,
	type: [],
	resource: "",
	desc: "",
});

const rules = reactive<FormRules>({
	name: [
		{ required: true, message: "Please input Shop name", trigger: "blur" },
		{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
	],
	region: [
		{
			required: true,
			message: "Please select Shop zone",
			trigger: "change",
		},
	],
	count: [
		{
			required: true,
			message: "Please select Shop count",
			trigger: "change",
		},
	],
	date1: [
		{
			type: "date",
			required: true,
			message: "Please pick a date",
			trigger: "change",
		},
	],
	date2: [
		{
			type: "date",
			required: true,
			message: "Please pick a time",
			trigger: "change",
		},
	],
	type: [
		{
			type: "array",
			required: true,
			message: "Please select at least one Shop type",
			trigger: "change",
		},
	],
	resource: [
		{
			required: true,
			message: "Please select Shop resource",
			trigger: "change",
		},
	],
	desc: [
		{ required: true, message: "Please input Shop form", trigger: "blur" },
	],
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log("submit!");
		} else {
			console.log("error submit!", fields);
		}
	});
};

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
	value: `${idx + 1}`,
	label: `${idx + 1}`,
}));
</script>
